<template>
	<view class="container">
		<view class="postx" :style="scrollTop>0?'background:#FFF;':''">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view class="flexJusp" style="font-size: 36rpx;font-weight: bold;text-align: center;padding:0 20rpx;"
				:style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
				<view style="width:50rpx;" @click="back"><image style="width:20rpx;height:34rpx;" src="/static/image/mv_tuichu.png"></image> </view>
				<view>充值</view>
				<view style="width:50rpx;"></view>
			</view>
		</view>
		<view style="width: 750rpx;height: 650rpx;background: linear-gradient(228deg,#CCEAFF,#F9FBFC);">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view :style="'height:'+navigationBarHeight+'px'"></view>
			<view style="color: #000;">
				<view style="font-size: 52rpx;font-weight: bold;padding:20rpx;">￥{{money}}</view>
				<view style="font-size: 30rpx;font-weight: bold;padding-left:20rpx;">当前余额</view>
			</view>
			<view style="width: 670rpx;background: #FFFFFF;border-radius: 28rpx;padding:20rpx;margin:36rpx 20rpx 24rpx;">
				<view style="font-size: 30rpx;font-weight: bold;">充值金额</view>
				<view class="flex" style="flex-wrap:wrap;">
					<view v-for="(item,index) in list" :key="index" :style="(index+1)%3==0?'':'margin-right:16rpx;'" style="position: relative;margin-top:20rpx;" @click="type = index">
						<!-- <image :src="type==index?'/static/image/04_3dfv.png':'/static/image/04_3cxx.png'" style="width:210rpx;height:180rpx;"></image> -->
						<image :src="type==index?'/static/s3cxx.jpg':'/static/s3dfv.jpg'" style="width:210rpx;height:180rpx;"></image>
						<view style="width:210rpx;height:140rpx;position:absolute;top:40rpx;left:0;font-size:42rpx;text-align: center;"> {{item.price}}<text style="font-size: 26rpx;">元</text>  </view>
					</view>
				</view>
			</view>
			<view class="buttons" @click="chongzhi">充值</view>
		</view>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '@/https/mixin.js'
	export default {
		mixins: [systemInfo],
		data() {
			return {
				type:0,
				money:0,
				price:0,
				scrollTop:0,
				list:[]
			}
		},
		onLoad() {
			this.getSystemInfo()
			this.loads()
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop // 获取当前页面滚动高度
			this.scrollTop = event.scrollTop
		},
		methods: {
			loads(){
				this.$httpapi('selectuserinfo', 'POST',{}).then(res => {
					this.money = res.data.money
				})
				this.$httpapi('chonglist', 'POST',{}).then(res => {
					this.list = res.data
				})
			},
			chongzhi(){
				var that = this
				this.$httpapi('chongzhi', 'POST',{price:this.list[this.type].price}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(rexx) {
							that.loads()
						},
						fail: function(err) {}
					});
				})
			},
			back(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F6FA;
	}
	.container {
		color: #333333;
		.postx {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
		}
		.buttons{
			margin:120rpx auto 0;
			text-align: center;
			width: 710rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}
</style>
